<template>
	<div class="index_login-wrap">
		<h2 class="notselect" style="color: white;margin-bottom: 100px;text-align: center;font-size: 34px;width: 100%;position: absolute;top: 20%;">
			绒校长后台管理</h2>
		<div class="ms-login">

			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">

				<ul>
					<li class="username">
						<i class="el-icon-user"></i>
						<el-form-item label="" prop="username">
							<el-input class="" v-model="param.username" name="username" placeholder="登录账号"
								style="height: 43px;" />
						</el-form-item>
					</li>
					<li class="password">
						<i class="iconfont iconmima"></i>
						<el-form-item label="" prop="password">
							<el-input type="password" class="" v-model="param.password" name="password" maxlength="32"
								placeholder="登录密码" style="height: 43px;" />
						</el-form-item>
					</li>
					<div class="login-btn">
						<el-button type="primary" style="width: 100%;border: 0;height: 43px;border-radius: 5px;background-color: #45bdfc"
							@click="submitForm()">登录</el-button>
					</div>
				</ul>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		fetchData,
		formitAdd,
		list,
		edict,
		login
	} from '../../api/index';
	export default {
		data: function() {
			return {
				param: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
			};
		},
		methods: {
			submitForm() {
			    let that = this
				this.$refs.login.validate(valid => {
					if (valid) {
						let query = {
							"username": this.param.username,
							"password": this.param.password,
						}
						login(query).then(res => {
							if (res.code == 0) {
								
								console.log(res)
								console.log(12233, this.param.username, this.param.password)
								localStorage.setItem('menu', res.menu);
								localStorage.setItem('ms_username', this.param.username);
								localStorage.setItem('ms_password', this.param.password);
								localStorage.setItem('Authorization', res.Authorization);
								localStorage.setItem('user_id', res.results.backstage_user_id);
								localStorage.setItem('role', res.role);
								this.$message.success('登录成功');
								// let menu= res.menu
								// let items_1=[]
								// let items=[{
								//             icon:  require('../../assets/img/icon_1.png'),
								//             index: 'dashboard',
								//             title: '报单管理'
								//         },
								// 		{
								// 		    icon:  require('../../assets/img/personList.png'),
								// 		    index: 'gonggao',
								// 		    title: '个人报单记录'
								// 		},
								// 		{
								// 		    icon:  require('../../assets/img/icon_3.png'),
								// 		    index: 'icon',
								// 		    title: '代理商/员工'
								// 		},
								// 		{
								// 		    icon:  require('../../assets/img/icon_4.png'),
								// 		    index: 'roleList',
								// 		    title: '角色管理'
								// 		},
								// 		{
								// 		    icon:  require('../../assets/img/icon_4.png'),
								// 		    index: 'templateSet',
								// 		    title: '权限设置'
								// 		},
								// 		{
								// 		    icon:  require('../../assets/img/icon_4.png'),
								// 		    index: 'personnal',
								// 		    title: '个人中心'
								// 		},
								// 		]
								// 		// console.log('===',menu)
								// 		for(var i=0;i<menu.length;i++){
								// 			for(var n=0;n<items.length;n++){
								// 				if(menu[i]==items[n].title){
								// 					items_1.push(items[n])
								// 				}
								// 			}
								// 		}
								// 		let firstRouter=items_1[0]
								// 		console.log(666,firstRouter)
								// 		this.$store.state.frame=res.frame
								// 		this.$store.state.num=res.overdue_number
			
								
								this.$router.push('/');
							} 

							//this.pageTotal = res.pageTotal || 50;
						});
						// this.$message.success('登录成功');
						// localStorage.setItem('ms_username', this.param.username);
						// this.$router.push('/');
					} else {

						console.log('error submit!!');
						return false;
					}
				});
			},
		},
	};
</script>

<style scoped>
	* {
		list-style: none;
	}

	/deep/ .el-form-item__error {
		width: 100px;
		position: absolute;
		right: 10px;
		left: initial;
		top: 14px;
		text-align: right;
		color: red !important
	}

	.index_login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/login-bg.png);
		background-size: 100%;
	}

	.index_login-wrap form {

		background-color: white;
	}

	.index_login-wrap form h2 {
		color: #fff;
		padding: 20px 0;
		font-size: 25px;
		text-align: center;
		font-weight: 700;
		letter-spacing: 3px;
		text-shadow: #000 0.05em 0.05em 0.05em;
	}

	.index_login-wrap form ul li {
		width: 100%;
		height: 40px;
		position: relative;
		margin-top: 30px;
		/* text-shadow: #000 0.1em 0.1em 0.1em; */
	}

	.index_login-wrap form ul li /deep/ input {
		width: 100%;
		/* color: #fff; */
		height: 45px;
		padding: 0 15px;
		font-size: 14px;
		line-height: 1em;
		text-indent: 35px;
		border-radius: 6px;
		letter-spacing: 1px;
		background: #fff;
		/* text-shadow: #000 0.1em 0.1em 0.1em; */
		/* -webkit-text-fill-color: #fff !important; */
		/* border: 0; */
		/* box-shadow: 0 2px 3px 0 rgb(0 0 0 / 30%) inset !important; */
		outline: none;
	}

	.index_login-wrap form ul li i {
		/* color: #fff; */
		font-size: 18px;
		position: absolute;
		z-index: 1000;
		color: #999;
		padding: 14px 15px 13px 20px;
	}

	.index_login-wrap .ms-login {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 400px;
		height: 260px;
		margin: auto;
		background: url(../../assets/img/1.png);
		background-size: 100% 100%;
		padding: 40px;
	}

	.index_login-wrap .ms-content {
		padding: 10px 30px;
	}

	.index_login-wrap .login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;

	}

	.login-btn .el-button--primary {
		color: #fff;
		background-color: #45bdfc;
		margin-top: 50px;

		/* border-color: rgb(235, 56, 12) */
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
</style>
